<template>
  <div class="order-number-content">
     <div style="text-align:center;font-size:15px;color:#73767a;margin-top:0px;">订单总数</div>
    <span class="order-count">{{ orderCount }}</span>
    <div class="order-divider"></div>
    <div class="order-avg">日订单数：{{ avgOrderCount }}</div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({ dateRange: Array });
const orderCount = ref(0);
const avgOrderCount = ref(0);

const getOrder = () => {
  import('@/api/order').then(module => {
    module.getOrderCountByDateRange({ dateRange: props.dateRange }).then(res => {
      const total = res.data.totalCount || 0;
      orderCount.value = total;
      const [start, end] = props.dateRange;
      const startDate = new Date(start);
      const endDate = new Date(end);
      const days = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;
      avgOrderCount.value = days > 0 ? (total / days).toFixed(2) : 0;
    });
  });
};

watch(
  () => props.dateRange,
  (newVal) => {
    if (newVal && newVal.length === 2) {
      getOrder();
    }
  },
  { immediate: true }
);
</script>

<style scoped>
.order-number-content {
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.order-count {
  margin: 0;
  font-weight: bolder;
  font-size: 32px;
}
.order-divider {
  margin: 24px 0 16px 0;
  border-top: 1px solid #eee;
  width: 80%;
}
.order-avg {
  font-size: 15px;
}
</style>
